<template>
	<view>
		<tito class="tito" title="推广统计" lefticon="left" @clickLeft="clickLeft" />
		<view class="statistics">
			<view class="number-motions">
				<view class="number">
					{{infoData.allTotal || 0}}
				</view>
				<view class="motions">
					推广总数
				</view>
			</view>
			<view class="number-motions">
				<view class="number">
					{{infoData.sevenTotal || 0}}
				</view>
				<view class="motions">
					近7日推广
				</view>
			</view>
			<view class="number-motions">
				<view class="number">
					{{infoData.monthTotal || 0}}
				</view>
				<view class="motions">
					本月推广
				</view>
			</view>
		</view>
		<view class="outsideList">
			<view class="title">
				<view class="tite-text">
					头像
				</view>
				<view class="tite-text">
					手机号码
				</view>
				<view class="tite-text">
					会员等级
				</view>
				<view class="tite-text">
					推广时间
				</view>
			</view>
			<view v-if="statisticsData.length > 0">
				<view class="formationList" v-for="(item,index) in statisticsData" :key="index">
					<view class="image">
						<image :src="item.logo" mode=""></image>
					</view>
					<view class="phone phone-vip-time">
						{{item.mobile}}
					</view>
					<view class="vip phone-vip-time">
						{{ tionTypes[item.shareType] }}
					</view>
					<view class="time phone-vip-time">
						{{item.createTime.split(' ')[0]}}
					</view>
				</view>
			</view>
			<view class="none" v-else>
				暂无更多
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoData:{},//统计数据
				statisticsData:[],//推广列表
				page: 1,
				limit: 10,
				tionTypes:{
				  1: '普通用户',
				  2: '消费会员',
				  3: '消费合伙人',
				}
			};
		},
		onLoad() {
			this.statisticsInfo()
			this.statisticsList()
		},
		onReachBottom() {
			this.page++
			this.statisticsList()
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			//统计数据
			async statisticsInfo() {
				let res = await this.$request.get("/water-platform-app-api/customer/statistics/info")
				if (res.data) {
					this.infoData = res.data
				}
			},
			//推广列表
			async statisticsList() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				let res = await this.$request.get("/water-platform-app-api/customer/statistics/list", data)
				if (res.data.length > 0) {
					this.statisticsData.push(...res.data)
				} else{
					uni.showToast({
						title: "没有更多了！",
						icon: "none"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.none{
		text-align: center;
		margin-top: 500rpx;
		font-size: 32rpx;
		color: #B1B2B2;
	}
	.statistics {
		height: 208rpx;
		background: linear-gradient(137deg, #25C5FA 0%, #2590FA 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 86rpx 30rpx 40rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;

		.number-motions {
			margin-bottom: 32rpx;

			.number {
				font-weight: 600;
				font-size: 44rpx;
				color: #FFFFFF;
			}

			.motions {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.7);
			}
		}
	}

	.statistics:after {
		content: "";
		width: 100%;
		height: 40rpx;
		position: absolute;
		left: 0;
		bottom: -5rpx;
		background: #25C5FA;
		filter: blur(3px);
		/*为了模糊更明显，调高模糊度*/
		z-index: 2;
	}

	.statistics::before {
		content: "123";
		position: absolute;
		left: 50%;
		bottom: 10rpx;
		width: 0;
		height: 0;
		transform: translateX(-50%);
		border-left: 35rpx solid transparent;
		border-right: 35rpx solid transparent;
		border-top: 35rpx solid #24A5FA;
		font-size: 0;
		line-height: 0;
		z-index: 3;
	}

	.outsideList {
		padding: 0 40rpx;
		box-sizing: border-box;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tite-text {
				font-weight: 600;
				font-size: 28rpx;
				color: #2E3033;
			}
		}

		.formationList:last-child {
			border-bottom: none;
		}

		.formationList {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #E4E5E6;
			padding: 24rpx 0;
			box-sizing: border-box;

			.image {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					vertical-align: middle;
				}
			}

			.phone-vip-time {
				font-size: 24rpx;
				color: #616366;
			}
		}
	}
</style>